<template>
  <gui-page ref="pageRef" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">专业</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <!-- 搜索框 -->
      <view class="gui-flex gui-bg-white gui-dark-bg-level-3 gui-border-box">
        <gui-search
          class="gui-flex1"
          :custom-class="['gui-margin-x', 'gui-bg-gray']"
          placeholder="请输入学校名称"
          @clear="search"
          @confirm="search"
        />
        <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
          <button class="gui-button-mini gui-primary-border-color gui-border-radius-full" :plain="true" type="default" @tap.stop="search">
            <text class="gui-icons gui-primary-color gui-button-text-mini">&#xe604; 搜索</text>
          </button>
        </view>
      </view>
      <view class="gui-bg-white gui-dark-bg-level-3 gui-border-box gui-text-small gui-bold gui-padding gui-border-b">计算机科学与技术</view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column" style="margin-top: 180rpx; margin-bottom: 80rpx">
        <view class="gui-text-small gui-flex gui-space-between gui-padding-x">
          <view>
            <text>开始院校</text>
            <text>（共215所）</text>
          </view>
          <view>
            <text class="gui-icons gui-color-gray gui-text gui-color-orange" style="margin-right: 15rpx" @tap.stop="openModal">
              &#xe628;
            </text>
            <text>数据说明</text>
          </view>
        </view>
        <!-- 主体区域 -->
        <view
          v-for="item in 10"
          :key="item"
          class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-box-shadow gui-border-b"
          style="margin-top: 10rpx"
        >
          <!--    学校信息      -->
          <view class="gui-flex gui-rows gui-nowrap">
            <image
              class="gui-card-img"
              mode="aspectFill"
              src="https://images.unsplash.com/photo-1663524789648-90fbdf8c8b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90"
            />
            <view class="gui-card-desc">
              <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                <text class="gui-card-name gui-primary-text">重庆大学【01】</text>
              </view>
              <view class="gui-flex gui-rows gui-third-text gui-nowrap gui-align-items-center gui-text-small">
                <text class="gui-text-small">重庆</text>
                <text class="gui-text-small gui-margin-x">沙坪坝</text>
                <text class="gui-text-small">公办</text>
              </view>
              <view class="gui-flex gui-rows gui-third-text gui-nowrap gui-align-items-center gui-text-small">
                <text class="gui-text-small">985</text>
                <text class="gui-text-small gui-margin-x">211</text>
                <text class="gui-text-small">又一流|综合</text>
              </view>
              <view class="gui-flex gui-rows gui-third-text gui-nowrap gui-align-items-center gui-text-small">
                <text class="gui-text-small">学校代码：</text>
                <text class="gui-text-small">211</text>
              </view>
              <view class="gui-flex gui-rows gui-third-text gui-nowrap gui-align-items-center gui-text-small">
                <text class="gui-text-small">专业排名：</text>
                <text class="gui-text-small">第一名</text>
              </view>
              <view class="gui-flex gui-rows gui-third-text gui-nowrap gui-align-items-center gui-text-small">
                <text class="gui-text-small">学校评估：</text>
                <text class="gui-text-small">A+</text>
              </view>
            </view>
          </view>
          <!--    专业信息      -->
          <!--          <view class="gui-flex gui-align-items-end gui-justify-content-end">-->
          <!--            <view class="gui-flex">-->
          <!--              <button-->
          <!--                class="gui-button-mini gui-primary-border-color gui-margin-x gui-border-radius-full"-->
          <!--                :plain="true"-->
          <!--                style="width: 150rpx"-->
          <!--                type="default"-->
          <!--                @tap.stop="other"-->
          <!--              >-->
          <!--                <text class="gui-primary-color gui-button-text-mini">其它专业</text>-->
          <!--              </button>-->
          <!--              <button-->
          <!--                class="gui-button-mini gui-bg-primary gui-noborder gui-border-radius-full"-->
          <!--                style="width: 100rpx"-->
          <!--                type="default"-->
          <!--                @tap.stop="filling"-->
          <!--              >-->
          <!--                <text class="gui-icons gui-color-white gui-button-text-mini">填报</text>-->
          <!--              </button>-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
      </view>
      <gui-popup ref="modalRef" :z-index="9999">
        <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
          <view>
            <view class="gui-bold">
              <text class="gui-h6">数据说明</text>
            </view>
            <view class="gui-margin-top">
              <text class="gui-text-small">专业排名：</text>
              <text class="gui-text-small">取自易度排名最新发布的2024中国大学专业排名。</text>
            </view>
            <view class="gui-margin-top">
              <text class="gui-text-small">学科评估：</text>
              <text class="gui-text-small">取自中国学位与研究生教育信息网，全国 第四轮学科评估结果（2016-2017）。</text>
            </view>
          </view>
          <!-- 关闭按钮 -->
          <text class="gui-block demo-close gui-icons gui-absolute-rt" @tap.stop="closeModal">&#xe78a;</text>
        </view>
      </gui-popup>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const modalRef = ref<any>(null)
const pageLoading = ref<boolean>(false)

// 搜索
const search = (e: any) => {
  console.log(e)
}
const openModal = () => {
  modalRef.value.open()
}
const closeModal = () => {
  modalRef.value.close()
}
onLoad((option) => {
  console.log(JSON.parse(option.data))
  // 获取页面主体高度从而得出主体高度
})
</script>
<style scoped>
/* 卡片视图 */
.gui-card-view {
  padding: 25rpx;
  margin-top: 30rpx;
}
.gui-card-body {
  padding-bottom: 30rpx;
}
.gui-card-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 80rpx;
}
.gui-card-desc {
  width: 400rpx;
  margin-left: 25rpx;
  flex: 1;
}
.gui-card-name {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-right: 20rpx;
}
.gui-card-text {
  line-height: 40rpx;
  font-size: 24rpx;
}
.gui-card-footer {
  margin-top: 25rpx;
}
.gui-card-footer-item {
  width: 100rpx;
  text-align: center;
  flex: 1;
  line-height: 38rpx;
  font-size: 26rpx;
}
/* #ifndef APP-NVUE */
.gui-card-footer-item {
  display: block;
}
.gui-box-shadow {
  box-shadow: unset;
}
/* #endif */
.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
.demo-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
</style>
